<template>
  <div>兄弟组件传参实验</div>
  <Son1 @on-click="customEvent"></Son1>
  <Son2 :color="colorSon2"></Son2>
</template>

<script setup lang="ts">
/**
 * 事件总线 Event Bus
 *    原理：运用了JS设计模式之发布订阅模式
 *    步骤：1.在src目录下面创建 Bus.ts 文件
 *          2.在Son1.vue、Son2.vue中局部引入 import Bus from '@/Bus';
 * Mitt
 *    1.下载 npm install --save mitt
 *    2.局部使用：在src目录下面创建 Mitt.ts 文件
 *               在Son1.vue、Son2.vue中局部引入 import mitter from '@/Mitt'; 派发：mitter.emit('事件名称',值) 监听：mitter.on('事件名称',()=>{})
 *    3.全局使用：编辑 main.ts
 *                  import mitt from 'mitt';
 *                  const Mitt = mitt();
 *                  declare module 'vue' {
 *                    export interface ComponentCustomProperties {
 *                      $Bus: typeof Mitt;
 *                    }
 *                  }
 *                  app.config.globalProperties.$Mitter = Mitt;
 *                派发:import { getCurrentInstance } from 'vue';
 *                     const instance = getCurrentInstance();
 *                     const value = ref<string>('使用全局Mitt传参');
 *                     const mitter = () => {
 *                       instance?.proxy?.$Mitter.emit('mitter', value);
 *                     };
 *                监听:import { getCurrentInstance } from 'vue';
 *                     const instance = getCurrentInstance();
 *                     instance?.proxy?.$Mitter.on('mitter', (value: any) => {
 *                       console.log(value.value);
 *                     });
 */
import Son1 from './Son1.vue';
import Son2 from './Son2.vue';
import { ref } from 'vue';
const colorSon2 = ref<string>('');
// 自定义事件传参
const customEvent = (color: any): void => {
  console.log(color.value);
  // 将该值传递给Son2
  colorSon2.value = color.value;
};
</script>

<style lang="scss" scoped></style>
